<template>
	<div class="container1">
		<dl>
			<dt>栏目1</dt>
			<dd>栏目1-1</dd>
			<dd>栏目1-2</dd>
			<dd>栏目1-3</dd>
			<dd>栏目1-4</dd>
			<dt>栏目2</dt>
			<dd>栏目2-1</dd>
			<dd>栏目2-2</dd>
			<dd>栏目2-3</dd>
			<dd>栏目2-4</dd>
			<dd>栏目2-5</dd>
			<dt>栏目3</dt>
			<dd>栏目3-1</dd>
			<dd>栏目3-2</dd>
			<dd>栏目3-3</dd>
			<dd>栏目3-4</dd>
			<dd>栏目3-5</dd>
		</dl>
	</div>
</template>
<script>
export default {
	data() {
		return {

		}
	},
	methods: {
	},
}
</script>
<style lang="scss">
.container1 {
	dl {
		display: grid;
		grid-template-columns: auto 1fr;
		max-width: 300px;
		margin: 1em;
		line-height: 1.4;
	}
	dt {
		grid-column: 1;
		font-weight: bold;
	}
	dd {
		grid-column: 2;
	}
}
.box {
	width: 100px;
	height: 100px;
	border: 1px solid #000;
}
</style>